var width = document.body.clientWidth; //可见区域宽度
function inheritPrototype(sub, sup) {
	var prototype = Object(sup.prototype)
	prototype.constructor = sub
	sub.prototype = prototype
}
function isH(direction) { //判断可滑动slider是否为垂直方向
    return direction === 'horizontal';
}
function CoverFlow(container, params) {
    Swiper.call(this, container, params)
    var swiper = this;
    swiper.effects.coverflow.setTranslate = function() {
        var s = swiper;   
        var transform = s.translate;
        var center = isH(s.params.direction) ? -transform + s.width / 2 : -transform + s.height / 2;
        var rotate = isH(s.params.direction) ? s.params.coverflow.rotate: -s.params.coverflow.rotate;
        var translate = s.params.coverflow.depth;  

        //Each slide offset from center
        for (var i = 0, length = s.slides.length; i < length; i++) {
            var opacity = 1;
            var slide = s.slides.eq(i);
            var slideSize = s.slidesSizesGrid[i];
            var slideOffset = slide[0].swiperSlideOffset;
            var offsetMultiplier = (center - slideOffset - slideSize / 2) / slideSize * s.params.coverflow.modifier;
            
            //设置slider的透明度
            if(offsetMultiplier >= 0 && offsetMultiplier < 1) {
                opacity = 1 - offsetMultiplier; //滑动中中间轴右边第一个透明度由1变为0
            } else if(offsetMultiplier >= 1) {
                opacity = 0; //滑动中中间轴右边除了第一个其他透明度为零
            } else {
                opacity = 1; //滑动中中间轴左边的透明度全为1
            } 
            slide.css("opacity", opacity);
            
            var rotateY = isH(s.params.direction) ? rotate * offsetMultiplier : 0;
            var rotateX = isH(s.params.direction) ? 0 : rotate * offsetMultiplier;
            // var rotateZ = 0
            var translateZ = translate * offsetMultiplier;
            
            var translateY = isH(s.params.direction) ? 0 : s.params.coverflow.stretch * (offsetMultiplier);
            var translateX = isH(s.params.direction) ? s.params.coverflow.stretch * (offsetMultiplier) : 0;
        
            //Fix for ultra small values
            if (Math.abs(translateX) < 0.001) translateX = 0;
            if (Math.abs(translateY) < 0.001) translateY = 0;
            if (Math.abs(translateZ) < 0.001) translateZ = 0;
            if (Math.abs(rotateY) < 0.001) rotateY = 0;
            if (Math.abs(rotateX) < 0.001) rotateX = 0;
        
            var slideTransform = 'translate3d(' + translateX + 'px,' + translateY + 'px,' + translateZ + 'px)  rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)';
        
            slide.transform(slideTransform);
            slide[0].style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;
            if (s.params.coverflow.slideShadows) {
                //Set shadows
                var shadowBefore = isH(s.params.direction) ? slide.find('.swiper-slide-shadow-left') : slide.find('.swiper-slide-shadow-top');
                var shadowAfter = isH(s.params.direction) ? slide.find('.swiper-slide-shadow-right') : slide.find('.swiper-slide-shadow-bottom');
                if (shadowBefore.length === 0) {
                    shadowBefore = $('<div class="swiper-slide-shadow-' + (isH(s.params.direction) ? 'left' : 'top') + '"></div>');
                    slide.append(shadowBefore);
                }
                if (shadowAfter.length === 0) {
                    shadowAfter = $('<div class="swiper-slide-shadow-' + (isH(s.params.direction) ? 'right' : 'bottom') + '"></div>');
                    slide.append(shadowAfter);
                }
                if (shadowBefore.length) shadowBefore[0].style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0;
                if (shadowAfter.length) shadowAfter[0].style.opacity = (-offsetMultiplier) > 0 ? -offsetMultiplier : 0;
            }
        }
        //Set correct perspective for IE10
        if (s.browser.ie) {
            var ws = s.wrapper[0].style;
            ws.perspectiveOrigin = center + 'px 50%';
        }
    }
    return swiper
}
inheritPrototype(CoverFlow, Swiper)
var swiper = new CoverFlow('.swiper', {
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: 'auto',
    initialSlide: 0,
    coverflow: {
        rotate: 0,
        stretch: width*30/100,
        depth: 300,
        modifier: 1,
        slideShadows : false
    } 
})